<template>
  <view class="cardsReg">
    <view class="cardsReg-tips">* 您可以申请多张会员卡， 但是不同服务门店的会员卡。</view>
    <view class="cardsReg-tips">* 您提交资料开卡时间为48小时内， 或联系客服直接开卡。</view>
    <view class="form_box">
      <uni-forms ref="valiForm" :rules="rules" label-width="80px" label-align="right" label-position="left"
        :modelValue="testDriveaParam">
        <uni-forms-item label="姓名" required name="userName">
          <uni-easyinput maxlength="10" :styles="{ borderColor: '#ffffff', color: '#333333' }" placeholder="请输入姓名"
            v-model="testDriveaParam.userName" />
        </uni-forms-item>

        <uni-forms-item label="手机号码" required name="phone">
          <uni-easyinput type="number" maxlength="11" :styles="{ borderColor: '#ffffff', color: '#333333' }"
            v-model="testDriveaParam.phone" placeholder="请输入手机号码" />
        </uni-forms-item>

        <uni-forms-item label="车牌号码" required name="car_id">
          <view class="my-input-box">
            <view class="my-input" @click="plateShow = true" v-if="testDriveaParam.car_id.length">{{
              testDriveaParam.car_id }}</view>
            <view v-else class="my-input placehol" @click="plateShow = true">请输入车牌号</view>
            <view class="new" :class="{ isNew: isNew }" @click="clickNew">新能源</view>
          </view>
        </uni-forms-item>

        <uni-forms-item label="底盘号" required name="chassisNumber">
          <uni-easyinput maxlength="17" :styles="{ borderColor: '#ffffff', color: '#333333' }"
            v-model="testDriveaParam.chassisNumber" placeholder="请输入17位底盘号" />
        </uni-forms-item>

        <picker :value="value" range-key="value" :range="centers" @change="centersChange($event, 'crm')">
          <uni-forms-item label="服务门店" required name="company_id">
            <view class="my-input-box">
              <view class="my-input" v-if="testDriveaParam.company_id.length">{{
                testDriveaParam.company
              }}</view>
              <view v-else class="my-input placehol">请选择服务门店</view>
              <uni-icons class="icon" color="#999" type="right" size="40rpx"></uni-icons>
            </view>
          </uni-forms-item>
        </picker>
      </uni-forms>

      <view class="radio_box">
        <u-checkbox-group>
          <u-checkbox activeColor="#de4141" @change="change"> </u-checkbox>
        </u-checkbox-group>
        <view>
          我已阅读、理解并同意此<text class="policy" @click="openRules">《隐私政策》</text>。</view>
      </view>
      <u-button color="#de4141" @click="submitReg('valiForm')">提 交</u-button>
    </view>
    <!-- 政策组件 -->
    <RulesCompany ref="rule"></RulesCompany>
    <UserLoginModal ref="openLogin"></UserLoginModal>
    <!-- 车牌号键盘 -->
    <u-keyboard :isNew="isNew" @isNewFu="clickNew" @cancel="plateShow = false" :showConfirm="false" :showCancel="false"
      @confirm="confirmCarId" mode="car" :tips="testDriveaParam.car_id" :show="plateShow" @close="plateShow = false"
      :closeOnClickOverlay="true" @change="valChange" @backspace="backspace">
      <!-- :autoChange="true" -->
      <!-- :overlay="false" -->
    </u-keyboard>
  </view>
</template>

<script>
import _ from 'lodash'
import { mapState } from 'vuex'
import { subscMixin } from '@/mixins/mixins.js'
import { applyRegMemberAdd } from '@/API/Shop'
// 保养预约规则
import { rulesCardsReg } from '@/static/js/rules.js'
export default {
  name: 'CardsReg',
  mixins: [subscMixin], // 混入
  data() {
    return {
      isNew: false,
      plateShow: false,
      // 基础表单数据
      testDriveaParam: {
        userName: '',
        phone: '',
        car_id: '',
        chassisNumber: '', // 17位底盘号
        company_id: '', // CRM公司ID, companyId
        company: '', //公司名称,companyName
        brand: '',
        uuid: ''
      },
      // 校验规则
      rules: rulesCardsReg()
      // 优惠券列表
      // couponByPhone: [],
      // 锦讯公司列表
      // companyList: [],
    }
  },
  computed: {
    // 自己公司列表和CRM公司列表
    ...mapState(['tmplIds', 'tmplIds', 'loginInfo', 'brandInfo', 'centers', 'centersList'])
    // 为券列表设置公司名
    // setCouponList() {
    //   let centersList = this.centersList
    //   let couponList = _.cloneDeep(this.couponByPhone)
    //   for (let index = 0; index < couponList.length; index++) {
    //     for (let i = 0; i < centersList.length; i++) {
    //       if (couponList[index].companyId == centersList[i].companyId) {
    //         couponList[index].companyName = centersList[i].simpleName
    //         break
    //       }
    //     }
    //   }
    //   console.log('couponList',couponList)
    //   return couponList
    // },
  },
  methods: {
    // 会员卡开通申请，增加提交
    submitReg(ref) {
      if (!this.checkedVal) {
        return uni.$showMsg('请阅读并同意勾选登录协议')
      }
      this.$refs[ref]
        .validate()
        .then(async res => {
          let { uuid } = this.loginInfo
          let { brand, car_id, phone, userName, company, company_id, chassisNumber } = this.testDriveaParam
          let itemForm = {
            uuid,
            phone,
            brand,
            car_id,
            userName,
            chassisNumber,
            companyName: company,
            companyId: company_id,
          }
          console.log('itemForm', itemForm)
          const {
            data: { code, message }
          } = await applyRegMemberAdd(itemForm)
          if (code === 200) {
            uni.showToast({
              title: '申请成功!',
              mask: true
            })
            this.$refs[ref].clearValidate()
            this.isTestDrive = false
            let { brand } = this.brandInfo
            // let temp = this.testDriveaParam
            // this.maintainInfo.userInfo.data = {
            //   thing21: {
            //     value: temp.name,
            //   },
            //   car_number24: {
            //     value: temp.car_id,
            //   },
            //   date3: {
            //     value: temp.appoint_time,
            //   },
            //   thing2: {
            //     value: temp.company,
            //   },
            //   thing7: {
            //     value: '预约成功！请您根据预约上门时间按时到店。',
            //   },
            // }
            // 重置表单
            this.testDriveaParam = {
              userName: '',
              phone: '',
              car_id: '',
              chassisNumber: '', // 17位底盘号
              company_id: '', // CRM公司ID, companyId
              company: '', //公司名称,companyName
              brand,
              uuid: ''
            }
            // this.change(false)
            // this.checkedVal = false
            // console.log('this.checkedVal', this.checkedVal)
            // uni.requestSubscribeMessage({
            //   //模板的模板ID
            //   tmplIds: ['xqK8i7NngDBykP6gxm9gYSPbdrwvRiqCGMXODaU_nMg'],
            //   success: (res) => {
            //     let temp = res.xqK8i7NngDBykP6gxm9gYSPbdrwvRiqCGMXODaU_nMg
            //     if (temp === 'accept') {
            //       //  用户同意发送信息时
            //       // 调用oppeId,api
            //       this.getUserOpenid()
            //     } else {
            //       //  用户不同意发送信息时
            //       // uni.$showMsg('授权失败')
            //       uni.navigateTo({
            //         url: '/pages/CarMaintain/CarMaintain',
            //       })
            //     }
            //   },
            //   fail: (err) => {
            //     //  用户选择一直不要发送信息时
            //     uni.navigateTo({
            //       url: '/pages/CarMaintain/CarMaintain',
            //     })
            //   },
            // })
          } else {
            uni.$showMsg(message)
          }
        })
        .catch(err => {
          console.log('err', err, ref)
          uni.showToast({
            title: '请检查输入信息！',
            icon: 'none'
          })
        })
    }
  },
  watch: {},
  // 页面周期函数--监听页面加载
  onLoad() {
    this.shareMixin.title = `卡券申请`
    this.shareMixin.path = `/pages/Shop/ShopAdmin`
    let { brand } = this.brandInfo
    this.testDriveaParam.brand = brand
  }
}
</script>

<style scoped lang="scss">
::v-deep .keyboard__tooltip {
  border-top: #f00 solid 1px !important;
}

::v-deep .uni-datetime-picker--btn {
  background-color: $theme-color;
}

::v-deep .uni-calendar-item--checked {
  background-color: $theme-color;
}

::v-deep .uni-calendar-item--checked {
  background-color: $theme-color !important;
}

::v-deep .uni-select__selector {
  z-index: 3;
}

::v-deep.uni-select {
  border: none !important;
}

::v-deep.u-border-bottom {
  border-bottom-style: none;
}

.cardsReg {
  padding-top: 30rpx;
  height: 100%;
  background: #f7f7f7;

  .cardsReg-tips {
    padding: 6rpx 30rpx;
    font-size: 28rpx;
    font-weight: 600;
    color: $theme-color;
  }
}

.form_box {
  margin: 30rpx 30rpx 40rpx 30rpx;
  padding: 40rpx 20rpx 40rpx 20rpx;
  box-shadow: $theme-shadow;
  border-radius: 10rpx;
  background-color: #fff;
}

.example {
  padding: 15px;
  background-color: #fff;
}

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  margin-left: 10px;
}

.radio_box {
  width: 660rpx;
  margin-bottom: 30rpx;
  // text-align: center;
  display: flex;
  justify-content: center;

  .policy {
    color: $theme-color;
  }
}

.kilometre {
  position: absolute;
  right: 140rpx;
  top: 12rpx;
}

.my-input-box {
  position: relative;

  .my-input {
    padding: 0 10px;
    font-size: 14px;
    color: #666;
    // border-bottom: 1px solid #ddd;
    line-height: 35px;
    height: 35px;
  }

  .placehol {
    color: #999 !important;
    font-size: 12px !important;
  }

  .icon {
    position: absolute;
    top: 12rpx;
    right: 5rpx;
  }

  // 车牌号
  .new {
    position: absolute;
    top: 12rpx;
    font-size: 12px;
    right: 25rpx;
    border: #999 solid 1px;
    color: #999;
    padding: 0px 6rpx;
    border-radius: 8rpx;
  }

  .isNew {
    border: #19b927 solid 1px !important;
    color: #19b927 !important;
  }
}
</style>
